<template>
	<div class="cache swiper" id="flow">
		<ul class="swiper-wrapper" :class="{ 'twodefault' :show}" >
			<li class="swiper-slide"  v-for="item in tabslist" :key="item.type" :class="{ 'default' : iscur===item.type}" @click="gtn(item.type)"><!-- @click="iscur = item.type" -->
				{{item.typeName}}
			</li>
		</ul>
		<p :class="{ 'threedefault' :show}" ></p>
		<CacheTab1 :propmsg="iscur"></CacheTab1>
	</div>
</template>

<script>
	// 引入vue周期函数
	import{onMounted} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper,{
		FreeMode
	}from 'swiper'
	// 3.swiper组件应用配置
	Swiper.use([FreeMode])
	
	import CacheTab1 from'./CacheTab1.vue'
	
	export default{
		name:'Cache',
		components:{
			CacheTab1,
		
		},
		data(){
			return{
				show:false,
				flow_top:'',
				tabs:[

				],
				tabslist:[],
				iscur:1, //默认选中第一个标题以及第一个组件
			}
		},
		created() {
			this.axios.get('https://m.youxiake.com/api/m/index/part?uid=&sitecode=1&city_id=1&refreshCount=43').then( (res)=> {
				// console.log(res);
				this.tabslist = res.data.data.flowTabList
				this.metn()
				// console.log(this.tabslist);
			}).catch( (error)=> {
				console.log(error);
			});
		},
		mounted() {
			let timer;
			let flag = true;
			window.addEventListener('scroll',()=>{
				//设置定时器
				if(flag){
					this.fiexMenus();
				}
				//关闭开关
				flag=false;
				clearTimeout(timer);
				timer = setTimeout( ()=>{flag = true},15);
			},true);
		},
		updated(){
			this.flow_top=flow.offsetTop
			// console.log(this.flow_top);
			
		},
		methods:{
			//当滚动事件被触发时调用的函数
			fiexMenus(){
				//当前区域距离窗口左上角的纵向坐标
				// console.log(window.pageYOffset);
				//当前滚动条的纵向坐标
				// console.log(document.documentElement.scrollTop);
				let sTop=window.pageYOffset || document.documentElement.scrollTop
				sTop>=this.flow_top?(this.show=true) :(this.show =false);
			},
			gtn(x){
				// console.log(x);
				this.iscur=x
			},
			metn(){
				new Swiper( '.cache' , {
					freeMode:{
						momentum:true
					},
					slideToClickedSlide: true,
					centeredSlides : true,
					centeredSlidesBounds:true,
					slidesPerView:5.8
				} )
			}
		},

	}
</script>

<style scoped>
	.cache{
		width: 100%;
		background-color: #ececec;
	}
	.cache ul{
		height: 1.5rem;
		line-height: 1.5rem;
		text-align: center;
		margin-bottom: 0.2rem;
		display: flex;
		align-items: center;
		width: 100%;
	}
	.cache ul li{
		width: 18%;
		height: 1.5rem;
		font-size: 0.37rem;
		background-color: #ececec;
	}
	.default{
		font-size: 0.39rem !important;
		font-weight: bold;
		background-size: 85% !important;
		background: url(../../../../public/images/cc1_1.png) no-repeat center;
	}
	.twodefault{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		
	}
	.threedefault{
		height: 1.7rem;
		width: 100%;
	}
</style>
